<template>
  <div class="register-page">
    <div class="header">
      <div class="logo">
        <span>VICHI.</span>
      </div>
      <div class="tagline">
        <span>向内探索，向上生长——薇启伴你觉醒潜能</span>
      </div>
      <div class="home-link">
        <router-link to="/">
          <el-button
            size="large"
            round
            style="background-color: black; width: 100px; color: white"
          >
            首 页
          </el-button>
        </router-link>
      </div>
    </div>

    <div class="register-container">
      <div class="register-image">
        <img src="/src/assets/img1.png" alt="Register Image" />
      </div>
      <div class="register-form-container">
        <el-form
          ref="registerFormRef"
          :model="registerForm"
          :rules="rules"
          class="register-form"
        >
          <h3
            style="
              text-align: center;
              margin-bottom: 15px;
              color: #333;
              font-weight: 600;
            "
          >
            创建账户
          </h3>
          <p
            style="
              text-align: center;
              font-size: 14px;
              color: #888;
              margin-bottom: 20px;
            "
          >
            加入Vichi，开始您的学习之旅
          </p>

          <el-form-item label="用户名" prop="username">
            <template #label>
              <span style="font-size:15px;font-weight:500;color:#333;margin-left: 5px;">用户名：</span>
            </template>
            <el-input
              v-model="registerForm.username"
              placeholder="请输入用户名"
              size="large"
              @blur="onUsernameBlur"
              style="width: 300px;margin-left: 4px;"
            >
              <template #prefix>
                <svg-icon icon="user" />
              </template>
            </el-input>

          </el-form-item>

          <el-form-item label="邮箱" prop="email">
            <template #label>
              <span style="font-size:15px;font-weight:500;color:#333;margin-left: 5px;">邮箱：</span>
            </template>
            <el-input
              v-model="registerForm.email"
              placeholder="请输入电子邮箱"
              size="large"
              style="width: 300px;margin-left: 18px;"
            >
              <template #prefix>
                <svg-icon icon="email" />
              </template>
            </el-input>
          </el-form-item>

          <el-form-item label="密码" prop="password">
            <template #label>
              <span style="font-size:15px;font-weight:500;color:#333;margin-left: 5px;">密码：</span>
            </template>
            <el-input
              v-model="registerForm.password"
              type="password"
              show-password
              placeholder="请输入密码"
              size="large"
              style="width: 300px;margin-left: 18px;"
            >
              <template #prefix>
                <svg-icon icon="password" />
              </template>
            </el-input>
          </el-form-item>

          <el-form-item label="确认密码" prop="confirmPassword">
            <template #label>
              <span style="font-size:15px;font-weight:500;color:#333;margin-left: 0px;">确认密码：</span>
            </template>
            <el-input
              v-model="registerForm.confirmPassword"
              type="password"
              show-password
              placeholder="请再次输入密码"
              size="large"
              style="width: 300px;margin-left: 5px;"
            >
              <template #prefix>
                <svg-icon icon="password" />
              </template>
            </el-input>
          </el-form-item>

          <el-form-item label="手机号码" prop="phone">
            <template #label>
              <span style="font-size:15px;font-weight:500;color:#333;margin-left: 10px;">手机号码：</span>
            </template>
            <el-input
              v-model="registerForm.phone"
              placeholder="请输入手机号码"
              size="large"
              style="width: 300px;margin-left: 5px;"
            >
              <template #prefix>
                <svg-icon icon="phone" />
              </template>
            </el-input>
          </el-form-item>

          <el-button
            type="primary"
            @click="submitForm"
            :loading="loading"
            style="width: 100%; background-color: black; margin-top: 10px"
          >
            <span style="color: white">注 册</span>
          </el-button>

          <div class="register-link-container" style="margin-top: 20px">
            <el-link
              type="info"
              @click="handleLoginClick"
              class="register-link"
            >
              已有账号？立即登录
            </el-link>
          </div>
        </el-form>
      </div>
    </div>

    <div class="footer">
      <div class="copyright">
        <span>Copyright © 2025 薇启Vichi 版权所有</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import requestUtil from "@/util/request";
import { encrypt } from "@/util/jsencrypt";
import { debounce } from "@/util/debounce";

const registerFormRef = ref(null);
const loading = ref(false);
const router = useRouter();

const registerForm = reactive({
  username: "",
  email: "",
  password: "",
  confirmPassword: "",
  phone: "",
});

const rules = reactive({
  username: [
    { required: true, message: "请输入用户名", trigger: "submit" },
    {
      min: 2,
      max: 15,
      message: "用户名长度在 2 到 15 个字符",
      trigger: "submit",
    },
  ],
  email: [
    { required: true, message: "请输入邮箱地址", trigger: "submit" },
    {
      type: "email",
      message: "请输入正确的邮箱地址",
      trigger: "submit",
    },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "submit" },
    { min: 6, max: 15, message: "密码长度在 6 到 15 个字符", trigger: "submit" },
  ],
  confirmPassword: [
    { required: true, message: "请再次输入密码", trigger: "submit" },
    {
      validator: (rule, value, callback) => {
        if (value !== registerForm.password) {
          callback(new Error("两次输入的密码不一致"));
        } else {
          callback();
        }
      },
      trigger: "submit",
    },
  ],
  phone: [
    { min: 11, max: 11, message: "手机号码长度为 11 位", trigger: "submit" },
  ],
});

const debouncedSubmit = debounce(async () => {
  try {
    const response = await requestUtil.post("/api/auth/register", {
      ...registerForm,
      password: encrypt(registerForm.password),
      confirmPassword: encrypt(registerForm.confirmPassword),
    });

    if (
      response.status === 201 &&
      response.data.message === "User registered successfully"
    ) {
      ElMessage.success("注册成功，请登录！");
      router.push("/login");
    } else {
      ElMessage.error(response.data.message || "注册失败，请稍后再试。");
    }
  } catch (error) {
    console.error("Error during registration:", error);
    ElMessage.error("网络异常，请检查后重试。");
  } finally {
    loading.value = false;
  }
}, 500);

const onUsernameBlur = () => {
  if (registerForm.username) {
    ElMessage.warning('用户名一经设定不得修改。');
  }
};

const submitForm = () => {
  ElMessage.warning('用户名一经设定不得修改。');
  registerFormRef.value.validate((valid) => {
    if (valid) {
      loading.value = true;
      debouncedSubmit();
    } else {
      ElMessage.error("表单验证未通过，请检查输入内容。");
    }
  });
};

const handleLoginClick = () => {
  router.push("/login");
};
</script>

<style lang="scss" scoped>
.register-page {
  width: 100%;
  min-height: 100vh;
  background-color: #f6f6f6;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  align-items: center;
  padding: 20px;
  margin-bottom: 20px;
}

.logo {
  margin-left: 10px;
  font-size: 50px;
  font-weight: bold;
  color: black;
}

.tagline {
  flex-grow: 1;
  margin-left: 20px;
  font-size: 20px;
  font-weight: bold;
  color: black;
  white-space: nowrap;
}

.home-link {
  margin-left: auto;
  margin-right: 20px;
}

.register-container {
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  gap: 40px;
  // padding: 0 20px;
}

.register-image {
  width: 40%;
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    max-width: 100%;
    height: auto;
  }
}

.register-form-container {
  width: 40%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.register-form {
  border-radius: 10px;
  background: #ffffff;
  width: 420px;
  padding: 32px 32px 24px 32px;
  margin-bottom: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

  .el-form-item__label {
    width: 80px !important;
    min-width: 80px;
    text-align: left;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    padding-right: 8px;
  }
  .el-form-item__content {
    flex: 1;
    min-width: 0;
    max-width: 320px;
  }
  .el-input {
    width: 100%;
    height: 40px;
    input {
      height: 40px;
      text-align: left;
    }
  }
}

.register-link-container {
  text-align: center;
  margin-top: 20px;
}

.register-link {
  text-decoration: none;
  color: #010101;
  font-size: 14px;

  &:hover {
    cursor: pointer;
  }
}

.footer {
  width: 100%;
  background-color: white;
  text-align: center;
  padding: 20px;
  margin-top: auto;
}

.copyright {
  font-size: 12px;
  color: #888;
}

.register-tip {
  color: #888;
  font-size: 13px;
  margin-top: 4px;
  line-height: 1.6;
}

// 响应式布局
@media (max-width: 768px) {
  .header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .tagline {
    margin: 10px 0;
  }

  .home-link {
    margin: 10px 0;
  }

  .register-container {
    flex-direction: column;
  }

  .register-image,
  .register-form-container {
    width: 100%;
    margin-bottom: 20px;
  }
}
</style>

<style>
/* 放在全局style，提升ElMessage弹窗大小和字体 */
.el-message {
  font-size: 18px !important;
  min-width: 320px !important;
  padding: 18px 32px !important;
}
.el-message--warning {
  background: #fff7e6 !important;
  color: #d97b00 !important;
  border-color: #ffe1b0 !important;
}
</style>
